<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Application Database Touch</title>
    <link rel="stylesheet" href="../dashboard/css/element-index.css">
    <!-- <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> -->
    <style>
        .el-header, .el-footer {
            background-color: #B3C0D1;
            color: #333;
            text-align: center;
            line-height: 60px;
        }

        .el-aside {
            background-color: #D3DCE6;
            color: #333;
            height: 1000px;
        }

        .el-main {
            background-color: #E9EEF3;
            color: #333;
            height: 1000px;
            width: auto;
        }

        body > .el-container {
            margin-bottom: 40px;
        }

        .demo-table-expand {
            font-size: 0;
        }
        .demo-table-expand label {
            width: 90px;
            color: #99a9bf;
        }
        .demo-table-expand .el-form-item {
            margin-right: 0;
            margin-bottom: 0;
            width: 50%;
        }
    </style>
</head>

<!-- import Vue before Element -->
<script src="../dashboard/js/vue.js"></script>
<!--<script src="https://unpkg.com/vue/dist/vue.js"></script>-->
<!-- import JavaScript -->
<script src="../dashboard/js/element-index.js"></script>
<!--<script src="https://unpkg.com/element-ui/lib/index.js"></script>-->
<!-- axios -->
<script src="../dashboard/js/axios.min.js"></script>
<!--<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>-->
<!-- json.js -->
<script src="../dashboard/js/json.js"></script>


<body>
<div id="app">
    <el-container>
        <el-header style="height: auto">
            <el-input
                    type="textarea"
                    :autosize="{ minRows: 6, maxRows: 10}"
                    placeholder="SQL脚本"
                    v-model="executeCommand.sql">
            </el-input>
            <el-button type="success" @click="doQuery()">Query</el-button>
            <el-button type="warning" @click="doPersist()">Persist</el-button>
        </el-header>
        <el-main>
            <el-table style="width: 100%" border :data="tableData">
                <el-table-column type="expand">
                    <template slot-scope="props">
                        <el-input
                                type="textarea"
                                autosize
                                placeholder="Result will display here."
                                v-model="props.row.JSON_FORMAT">
                        </el-input>
                    </template>
                </el-table-column>
                <template v-for="(item,index) in tableHead">
                    <el-table-column :prop="item.column_name" :label="item.column_name" :key="index" >
                        <!-- select * from `lbs_basic_microservice`.account_user limit 100 -->
                    </el-table-column>
                </template>
            </el-table>
        </el-main>
    </el-container>

</div>

<script>
    var RELATION_ROOT_PATH = "../..";
    var dbTouchData = {
        executeCommand:{
            sql:'',
        },
        // 表格数据
        tableData: [
            //{id:10,name:"casue"}
        ],
        tableHead:[
            //{column_name:"id"}
        ],
        //执行结果通知选项
        asertResOptions:[
            {title:'Success', type:'success', message:'成功'},
            {title:'Execute Error', type:'error', message:'数据库执行异常'},
            {title:'Server error',type:'error', message:'服务异常'}
        ]

    };
    var app =new Vue({
        el: '#app',
        data: dbTouchData,
        mounted:function () {},
        methods:{
            //查询
            doQuery: function(){
                axios.post(RELATION_ROOT_PATH + "/dashboard/dbtouch/query",dbTouchData.executeCommand).then(function (response) {
                    dbTouchData.tableData = [];
                    dbTouchData.tableHead = [];
                    var serverResponse = response.data;
                    if(serverResponse["success"]){
                        app.asertResult(dbTouchData.asertResOptions[0]);
                        dbTouchData.tableData = serverResponse["data"];
                        if(dbTouchData.tableData.length > 0){
                            for (var key in dbTouchData.tableData[0]){
                                dbTouchData.tableHead.push({column_name:key});
                            }
                        }
                        console.log(JSON.stringify(dbTouchData.tableData));
                        dbTouchData.tableData.forEach((item) => item["JSON_FORMAT"] = formatJson(item));
                    }else {
                        console.log(serverResponse);
                        app.asertResult(dbTouchData.asertResOptions[1]);
                    }
                }).catch(error => {
                    console.log(error.toString());
                    app.asertResult(dbTouchData.asertResOptions[2]);
                });
            },
            //持久化
            doPersist: function(){
                axios.post(RELATION_ROOT_PATH + "/dashboard/dbtouch/persist",dbTouchData.executeCommand).then(function (response) {
                    dbTouchData.tableData = [];
                    dbTouchData.tableHead = [];
                    var serverResponse = response.data;
                    if(serverResponse["success"]){
                        app.asertResult(dbTouchData.asertResOptions[0]);
                        console.log(JSON.stringify(serverResponse));
                    }else {
                        console.log(serverResponse);
                        app.asertResult(dbTouchData.asertResOptions[1]);
                    }
                }).catch(error => {
                    console.log(error.toString());
                    app.asertResult(dbTouchData.asertResOptions[2]);
                });
            },
            //结果通知
            asertResult(asertOption) {
                this.$notify(asertOption);
            }
        }
    })
</script>

</body>
</html>